<template>
  <span
    v-if="isOpen"
  >
    <el-dialog
      :visible.sync="isOpen"
      :modal="false"
      append-to-body
    >
      <template v-slot:title>
        <slot name="title" />
      </template>
      <slot @close="isOpen = false" />
    </el-dialog>
  </span>
  <el-button
    v-else
    v-bind="$attrs"
    @click="isOpen = !isOpen"
    :icon="icon"
  >
    <template v-if="label">
      {{ label }}
    </template>
  </el-button>
</template>

<script>

export default {
  data () {
    return {
      isOpen: false
    }
  },
  props: {
    icon: {
      type: String,
      default: 'el-icon-s-comment'
    },
    label: {
      type: String,
      default: ''
    }
  },
  components: {
  }
}
</script>

<style scoped>

</style>
